﻿@{
    Layout = null;
}
@using MvcApplication.Entity
@model ImageEditParam
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>编辑图片</title>
    <script src="~/Content/jquery/jquery-1.11.2.js"></script>
    @Styles.Render("http://cdn.amazeui.org/amazeui/2.5.2/css/amazeui.min.css")
    @Scripts.Render("http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.min.js")
    @Scripts.Render("http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.ie8polyfill.min.js")
    @Scripts.Render("http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.widgets.helper.min.js")
    @Scripts.Render("~/Content/jquery/jquery.easying.js")

    @Scripts.Render("~/Scripts/jquery.validate.min.js")
    @Styles.Render("~/Content/layer/css/")
    @Scripts.Render("~/Content/layer/js")
    @Styles.Render("~/Content/Jcrop/css/jquery.Jcrop.min.css")
    @Scripts.Render("~/Content/Jcrop/js/jquery.Jcrop.min.js")
</head>
<body>

    <style>
        .image-container {
            width: 800px;
            overflow: hidden;
        }

            .image-container img {
                max-width: 800px;
                height: auto;
            }
    </style>
    <div class="am-g">
        <div class="am-u-sm-8">
            <section class="am-panel am-panel-default">
                <header class="am-panel-hd">
                    <h3 class="am-panel-title">编辑图片</h3>
                </header>
                <div class="am-panel-bd">
                    <form style="margin-bottom: 10px;">
                        <input type="text" name="width" id="width" style="width: 100px;" placeholder="图片宽度" value="800" />
                        <button type="button" class="am-btn am-btn-warning am-radius am-btn-xs" onclick="setWidth()">设置</button>
                        <input type="text" name="height" id="height" style="width: 100px;" placeholder="图片高度" value="400"/>
                        <button type="button" class="am-btn am-btn-warning am-radius am-btn-xs" onclick="setHeight()">设置</button>
                        <button type="button" class="am-btn am-btn-success am-radius am-btn-xs" onclick="preview()">预览</button>
                        <button type="button" class="am-btn am-btn-success am-radius am-btn-xs" onclick="save()">保存并返回</button>
                        <button type="button" class="am-btn am-btn-primary am-radius am-btn-xs" onclick="zoom_up()">+</button>
                        <button type="button" class="am-btn am-btn-primary am-radius am-btn-xs" onclick="zoom_down()">-</button>
                    </form>
                    <form id="data">
                        <input type="hidden" id="path" />
                        <input type="hidden" id="originPicture" value="@Model.Path" />
                    </form>
                    <div class="image-container">
                        <img src="~/image?path=@Model.Path" id="imagePanel" />
                    </div>
                </div>
            </section>
        </div>
        <div class="am-u-sm-4">
            <section class="am-panel am-panel-default">
                <header class="am-panel-hd">
                    <h3 class="am-panel-title">图片预览</h3>
                </header>
                <div class="am-panel-bd">
                    <div id="previewPanel"></div>
                </div>
            </section>
        </div>
    </div>
</body>
</html>
@Scripts.Render("~/Content/js/image/edit.js");